<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link type="text/css" rel="stylesheet" th:href="@{/static/jsmind/jsmind.css}" />
    <script type="text/javascript" th:src="@{/static/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/static/jsmind/jsmind.js}"></script>
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <style>
        .tip{
            font-size: 16px;
            line-height: 32px;
            margin: 0 20px;
        }
        .hasButNotLearn{
            background-color: gray;
        }
        .empty{
            background-color: white;
        }
    </style>
</head>

<body>
<header>
    <div>
        <ul class="layui-nav">
            <!-- 设定layui-this来指向当前页面,即绿色滑块移动到该分类下方 -->
            <li class="layui-nav-item">
                <a th:href="@{/index}">真会学</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:" sec:authentication="name"><i class="layui-icon layui-icon-user" style="font-size: 20px;margin: 0px 10px;"></i>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/user/my/front">个人信息</a></dd>
                    <dd><a th:href="@{/logout}">退了</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</header>
<div style="display: flex;margin-top: 20px;">
    <div class="tip hasButNotLearn">已有学习内容</div>
    <div class="tip empty">等待教师上传学习内容</div>
</div>
<input id="book_name" type="hidden" th:value="${book_name}">
<div id="test"></div>
<div id="jsmind_container" style="height: 1250px;width:100%;"></div>
</body>
<!--<footer class="layui-trans layadmin-user-login-footer">-->
<!--    <a href="https://beian.miit.gov.cn/" target="_blank">-->
<!--        皖ICP备2022003330号-->
<!--    </a>-->
<!--</footer>-->
<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index']);
</script>
<script type="text/javascript">
 window.onload=function (){
     var mind="";
     $.ajax({
         url: '/JsMind/Create',
         type: 'get',
         async: false,
         dataType: "JSON",
         data: {
             "book_name":$("#book_name").val(),
         },
         success(result){
             mind = result;
             console.log(mind)
         },
         failed(){

         }
     })
    var options = {
         container : 'jsmind_container',         // [必选] 容器的ID
         editable : true,       // 是否启用编辑
         theme : 'default',           // 主题
         mode :'full',           // 显示模式
         support_html : true,    // 是否支持节点里的HTML元素
         view:{
             engine: 'svg',   // 思维导图各节点之间线条的绘制引擎
             hmargin:100,        // 思维导图距容器外框的最小水平距离
             vmargin:50,         // 思维导图距容器外框的最小垂直距离
             line_width:4,       // 思维导图线条的粗细
             line_color:'#555'   // 思维导图线条的颜色
         },
         layout:{
             hspace:30,          // 节点之间的水平间距
             vspace:25,          // 节点之间的垂直间距
             pspace:20          // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
         },
         shortcut:{
             enable:false,        // 是否启用快捷键
             handles:{},         // 命名的快捷键事件处理器
             mapping:{           // 快捷键映射
                 addchild   : 45,    // <Insert>
                 addbrother : 13,    // <Enter>
                 editnode   : 113,   // <F2>
                 delnode    : 46,    // <Delete>
                 toggle     : 32,    // <Space>
                 left       : 37,    // <Left>
                 up         : 38,    // <Up>
                 right      : 39,    // <Right>
                 down       : 40,    // <Down>
             }
         },
     };
     var jm = new jsMind(options);
     jm.show(mind);

     mind.data.map(function(item, index, array) {
        if(item.data!=null && item.data.hasContent!=null && item.data.hasContent!=="")
         jm.set_node_color(item.id, 'gray', null)

     })
     jm.disable_edit()
     $("#jsmind_container").click(function (){
       var node = jm.get_selected_node()
       if(node!=null&&node.children.length===0){
        console.log(node)
         console.log(node.id)
           jm.select_clear()
         window.location.href="/menu/front/toStudyPage?book_name="+jm.get_root().id+"&menu_topic="+node.id+":"+node.topic
       }

   })
 }


</script>
</html>